<template>
  <transition
    name="page"
    mode="out-in"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <div class="page-wrapper">
      <slot />
    </div>
  </transition>
</template>

<script setup>
const beforeEnter = (el) => {
  el.style.opacity = 0
  el.style.transform = 'translateY(10px)'
}

const enter = (el, done) => {
  setTimeout(() => {
    el.style.transition = 'all 0.3s ease-out'
    el.style.opacity = 1
    el.style.transform = 'translateY(0)'
    done()
  }, 50)
}

const afterEnter = (el) => {
  el.style.transition = ''
}

const beforeLeave = (el) => {
  el.style.opacity = 1
  el.style.transform = 'translateY(0)'
}

const leave = (el, done) => {
  el.style.transition = 'all 0.2s ease-in'
  el.style.opacity = 0
  el.style.transform = 'translateY(-10px)'
  setTimeout(done, 200)
}

const afterLeave = (el) => {
  el.style.transition = ''
  el.style.transform = ''
}
</script>

<style scoped>
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}

.page-enter-from {
  transform: translateY(10px);
}

.page-leave-to {
  transform: translateY(-10px);
}
</style>